<template>
	<view class="container">
		<view class="top_img">
			<image class="bg" :src="$fun.imgUrl('webimage/register_bg.png')" mode=""></image>
			<view class="logo">
				<image src="/static/login_logo.png" mode=""></image>
				<view>
					注册
				</view>
			</view>
		</view>
		<view class="register_box">
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入真实手机号码" v-model="mobile">
			</view>
			<!-- 			<view class="input-item" v-if="config">
				<text class="tit">验证码</text>
				<input type="number" v-model="code"  placeholder="请输入验证码" maxlength="6" />
				<text class="code" @click="getCode()">{{tip}}</text>
			</view> -->
			<view class="register_item" v-if="config">
				<input type="text" maxlength="6" placeholder-class="inputPlaceholder" placeholder="请输入验证码">
				<text class="code" @click="getCode()">{{tip}}</text>
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入真实姓名" v-model="truename">
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的推荐码" v-model="invitation">
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的登录密码" v-model="password">
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的支付密码" v-model="paypwd">
			</view>
			<view class="register_item"
				style="display: flex;justify-content: space-between;padding: 0 30rpx;align-items: center;padding-right: 0;">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入验证码" v-model="captcha">
				<view class="" style="height: 80rpx;width: 250rpx;">
					<image style="height: 100%;width: 100%;border-radius: 40rpx;" :src="imgUrlCode" mode=""
						@tap="getToken"></image>
				</view>
			</view>
			<button class="register_button" @click="toLogin" :disabled="logining">
				确认注册
			</button>
		</view>
		<view class="register-section">
			<view class="">
				<checkbox @click="isCh=!isCh" :checked="isCh" /><text style="color: #606266;">我已同意 <text
						@click="$fun.jump('/pageB/noticeList/noticeInfo?name=用户政策&type=16')">用户政策</text> 和 <text
						@click="$fun.jump('/pageB/noticeList/noticeInfo?name=隐私政策&type=15')">隐私政策</text> </text>
			</view>
			<view class="">
				已有账号?
				<text @click="$fun.jump(`/pageA/public/login`,3,0)">马上登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import env from "@/util/env.js"
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				mobile: '',
				truename: '',
				code: '',
				invitation: '',
				logining: false,
				loginList: [],
				password: "",
				paypwd: "",
				tip: '发送验证码',
				timer: null,
				event: 'register',
				config: 0,
				configObj: {},
				disabled: false,
				isCh: false,
				imgUrlCode: 'http://www.firetigercloud.com/index.php?s=/captcha',
				captcha: '',
				uniqid: ''
			}
		},
		onLoad(Option) {
			if (Option.invitation) {
				this.invitation = Option.invitation
				this.disabled = true
			}
		},
		onShow() {
			this.$fun.ajax.post('index/config', {}).then(res => {
				this.loginList = res.data.login
				this.configObj = res.data
			})
			this.$fun.ajax.post('config/sendsms').then(res => {
				// //console.log(res)
				this.config = res.data.code
			})
			this.getToken()
		},
		methods: {
			...mapMutations(['login']),
			async getToken() {
				const res = await this.$fun.ajax.post(
					env.prod.baseUrl + '/index.php/api/withdraw/captcha', {})
				// this.$fun.ajax.post('captcha/captcha',{})
				if (res.code == 1) {
					this.uniqid = res.data.uniqid
					this.imgUrlCode = res.data.src
				}
			},
			sendCode() {
				if (this.tip == '发送验证码') {
					this.tip = 60;
					this.timer = setInterval(() => {
						if (this.tip <= 0) {
							this.tip = '发送验证码'
							clearInterval(this.timer)
							this.timer = null
						} else {
							this.tip -= 1
						}
					}, 1000)
				}
			},
			gotoApp() {
				location.href = this.configObj.download_address
			},
			async getCode() {

				const {
					mobile,
					event
				} = this;

				const sendData = {
					mobile,
					event
				};

				if (!mobile) {
					this.$fun.msg('请输入手机号');
					return
				}

				const code = await this.$fun.ajax.post('sms/send', sendData);
				if (code.code === 1) {
					this.$fun.msg('发送成功');
					this.sendCode();
				} else {
					this.$fun.msg(code.data.msg ? code.data.msg : '发送失败');
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$fun.jump('/pageA/public/login', 3, 0)
			},
			async toLogin() {
				const {
					mobile,
					truename,
					code,
					config,
					invitation,
					password,
					paypwd,
					captcha,
					uniqid
				} = this;
				const sendData = {
					mobile,
					truename,
					// code,
					invitation,
					password,
					paypwd,
					code: captcha,
					uniqid
				};
				//console.log(sendData)
				// 手机号为空
				if (!this.isCh) {
					this.$fun.msg('请先同意用户协议和隐私协议');
					return
				}
				if (!mobile) {
					this.$fun.msg('请输入手机号');
					return
				}
				// 密码为空
				if (!truename) {
					this.$fun.msg('请输入姓名');
					return
				}
				//验证码为空
				if (config && !code) {
					this.$fun.msg('请输入验证码');
					return
				}
				//验证码为空
				if (config && !code) {
					this.$fun.msg('请输入验证码');
					return
				}
				//登录密码
				if (!password) {
					this.$fun.msg('请输入登录密码');
					return
				}
				//交易密码
				if (!paypwd) {
					this.$fun.msg('请输入交易密码');
					return
				}
				if (!/^\d{6}$/.test(paypwd)) {
					this.$fun.msg('交易密码密码必须为6位数字');
					return
				}
				//交易密码
				if (!captcha) {
					this.$fun.msg('请输入验证码');
					return
				}

				this.logining = true;

				const result = await this.$fun.ajax.post('user/register', sendData);
				if (result.code === 1) {
					this.$fun.msg('注册成功');
					setTimeout(() => {
						this.$fun.jump('/pageA/public/login', 3, 0)
						// #ifdef H5
						location.href = this.configObj.download_address
						// #endif
					}, 500)
				} else {
					this.logining = false;
				}
			}
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		}

	}
</script>

<style lang='scss'>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;

		.top_img {
			width: 100%;
			height: 410upx;

			.bg {
				width: 100%;
				height: 410upx;
			}

			.logo {
				text-align: center;
				position: absolute;
				top: 100upx;
				left: 0;
				right: 0;
				margin: auto;

				image {
					width: 140upx;
					height: 140upx;
				}

				view {
					font-size: 36upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #F6F6F6;
					margin-top: 20upx;
				}
			}
		}

		.register_box {
			margin: 20upx 75upx;

			.register_item {
				position: relative;
				margin-top: 30upx;
				width: 100%;
				height: 80upx;
				background: #F6F6F6;
				border: 2upx solid #BFBFBF;
				border-radius: 40upx;
				padding: 20upx 40upx;
				box-sizing: border-box;

				input {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}

				.inputPlaceholder {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCCCCC;
				}

				.code {
					position: absolute;
					top: 25upx;
					right: 40upx;
					font-size: 24upx;
				}
			}

			.register_button {
				margin-top: 100upx;
				width: 100%;
				height: 80upx;
				background: linear-gradient(90deg, #5990FF 0%, #55aaff 100%);
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}

		.register-section {
			position: absolute;
			left: 0;
			bottom: 50upx;
			width: 100%;
			font-size: $font-sm+2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: #5990FF;
				margin-left: 10upx;
			}
		}
	}
</style>